<template>
  <div>
    <div class="city" @click="handleCity">
      {{ cityName }}<i class="iconfont icon-xiajiantou"></i>
    </div>
    <!-- 初始化过早错误，轮播组件加载已完成之后，数据才请求到，所以会导致轮播图无法正常轮播，加一个key="swiperData.length"，key值不同vue会干掉之前已有的元素重新创建 -->
    <films-swiper
      :swiperOptions="filmSwiper"
      :key="swiperData.length"
      style="background: #fff"
    >
      <films-swiper-item
        v-for="item in swiperData"
        :key="item.bannerId"
        style="hright: min-content"
      >
        <img :src="item.imgUrl" alt="" style="width: 100%" />
      </films-swiper-item>
    </films-swiper>
    <films-title scrolltop="199">
      <span
        style="font-size: 13px; position: absolute; left: 15px"
        @click="handleCity"
        >{{ cityName
        }}<van-icon
          name="arrow-down"
          style="margin-left: 3px; position: relative; top: 1px"
          color="#000"
          size="12"
      /></span>
    </films-title>
    <films-header class="sticky"></films-header>
    <router-view v-if="cityId" />
  </div>
</template>

<script>
import http from "@/utils/http";
import filmsSwiper from "@/components/films/FilmsSwiper.vue";
import filmsSwiperItem from "@/components/films/FilmsSwiperItem.vue";
import filmsHeader from "@/components/films/FilmsHeader.vue";
import filmsTitle from "@/components/films/FilmsTitle.vue";
import { mapState, mapMutations } from "vuex";
import { Dialog } from "vant";

export default {
  components: {
    filmsSwiper,
    filmsSwiperItem,
    filmsHeader,
    filmsTitle,
  },
  data() {
    return {
      filmSwiper: {
        loop: true,
        autoplay: true,
        pagination: {
          el: ".swiper-pagination",
        },
      },
      swiperData: [],
    };
  },
  computed: {
    ...mapState("city", ["cityId", "cityName"]),
  },
  created() {
    if (!this.cityId) {
      Dialog.alert({
        message: "定位失败，请手动选择当前所在城市",
      }).then(() => {
        // on close
        this.$router.push({ name: "city" });
      });
    }
  },
  mounted() {
    http({
      url: `/gateway?type=2&cityId=${this.cityId}&k=6626012`,
      headers: {
        "X-Host": "mall.cfg.common-banner",
      },
    }).then((response) => {
      this.swiperData = response.data.data;
    });
  },
  methods: {
    ...mapMutations("cinemaArea", ["clearCinema"]),
    handleCity() {
      this.$router.push("/city");
      // 清空cinemaList
      // this.$store.commit("clearCinema");
      this.clearCinema();
    },
  },
};
</script>

<style scoped lang="scss">
.sticky {
  position: sticky;
  top: 0px;
}

.city {
  // width: 48px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  padding: 0 5px;
  border-radius: 15px;
  text-align: center;
  position: absolute;
  top: 10px;
  left: 8px;
  z-index: 2;

  i {
    position: relative;
    top: 1px;
  }
}
</style>
